import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';

const Echartstwo: React.FC = () => {
    const chartRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (chartRef.current) {
            const chart = echarts.init(chartRef.current);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['在线', '离线'],
                    top: 30,
                    textStyle: {
                        color: '#fff',
                        fontSize: 10 // 缩小字体大小
                    }
                },
                grid: {
                    left: '5%',  // 增加左边距
                    right: '5%', // 增加右边距
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['水位设备', '雨量设备', '流量设备', '开度设备', '汛情设备', '安全设备'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 9 // 缩小字体大小
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: '#fff',
                            fontSize: 10 // 缩小字体大小
                        }
                    }
                ],
                series: [
                    {
                        name: '在线',
                        type: 'bar',
                        barWidth: '40%', // 增加图表的宽度
                        data: [200, 150, 80, 70, 110, 130],
                        itemStyle: {
                            color: '#5087ec'
                        }
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        barWidth: '40%', // 增加图表的宽度
                        data: [50, 70, 60, 40, 30, 20],
                        itemStyle: {
                            color: '#ff5e59'
                        }
                    }
                ]
            };
            chart.setOption(option);

            // 窗口调整大小处理
            const handleResize = () => {
                chart.resize();
            };
            window.addEventListener('resize', handleResize);

            return () => {
                window.removeEventListener('resize', handleResize);
                chart.dispose();
            };
        }
    }, []);

    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    );
};

export default Echartstwo;